<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" :duration="1500" @change="onChange">
      <swiper-item v-for="item in props.list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imageUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
          v-for="(item, index) in props.list"
          :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
  
</template>


<script setup >
import { ref } from 'vue'
const activeIndex = ref(0)
const onChange=(event)=>{ 
    activeIndex.value = event.detail.current
   
}
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

</script>


<style lang="scss">
@import './styles/TreeSwiper.scss';
</style>
